<template>
    <div>
        <div class="row gap15" >
            <n-button v-show="!capture.capturing" type="info" @click="capture.start()">选择屏幕或窗口</n-button>
            <n-button v-show="capture.capturing" type="warning" secondary @click="capture.stop()">停止截屏</n-button>
            <span class="grow"></span>
            <n-button @click="bShowWebUrlDlg=true">WEB页面</n-button>
        </div>
        <div class="shrink0 row center" style="margin-top: 20px; ">
            <div class="column center" style="position: relative; background-color:black;" :style="{width:stageWidth+'px',height:stageHeight+'px'}">
                <video id="projVideo" ref="refVideo" autoplay style="position: relative;" xxxstyle="{left: capture.contentX+'px',top: capture.contentY+'px'}" ></video>
            </div>
        </div>

        <n-modal v-model:show="bShowWebUrlDlg" preset="dialog" title="打开Web页面">
            <div class="column">
                <div class="row gap15" style="margin-top:30px;">
                    <n-input placeholder="请输入网址" v-model:value="url"></n-input>
                </div>
                <div class="row gap15 item-center" style="margin-top:30px;">
                    <n-checkbox v-model:checked="bFixWebWinSize" size="large" label="设置窗口尺寸" class="shrink0" />
                    <n-input :disabled="!bFixWebWinSize" pair separator="x" :placeholder="['宽','高']" clearable v-model:value="webWinSize"/>
                </div>

                <div class="row gap15 item-center" style="margin-top:30px;">
                    <n-checkbox v-model:checked="capture.bCrop" size="large" label="局部" class="shrink0" />
                </div>
                <div class="row gap10 item-center" style="margin-top:10px;">
                    <span class="shrink0">位置</span>
                    <n-input :disabled="!capture.bCrop" pair separator="," :placeholder="['X','Y']" clearable v-model:value="capture.cropPos"/>
                    <span class="shrink0">尺寸</span>
                    <n-input :disabled="!capture.bCrop" pair separator="x" :placeholder="['宽','高']" clearable v-model:value="capture.cropSize"/>
                </div>

                <div class="row end gap10" style="margin-top:50px; margin-bottom:5px;">
                    <n-button @click="bShowWebUrlDlg=false">取消</n-button>
                    <n-button @click="openWebPage" type="success" :disabled="!url">打开</n-button>
                </div>
            </div>
        </n-modal>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted, reactive, Ref, inject } from 'vue'
import {FrameBuffer} from './FrameBuffer'
import {CaptureScreen} from './Capture'
import { conn } from '@beshell/conn-ts/Connection'

const frameBuffer = inject<FrameBuffer>("frameBuffer") as FrameBuffer

const refVideo = ref(null) as unknown as Ref<HTMLVideoElement>

const stageWidth = inject("stageWidth") as Ref<number>
const stageHeight = inject("stageHeight") as Ref<number>

const bShowWebUrlDlg = ref(false)
const url = ref('http://127.0.0.1:8078')

const bFixWebWinSize = ref(false)
const webWinSize = ref([stageWidth.value, stageHeight.value])

const capture = reactive(new CaptureScreen('screen', frameBuffer))

let webWin = null

onMounted(()=>{
    capture.attach(refVideo.value)
    capture.setStageSize(stageWidth.value, stageHeight.value)
})

function getCapture() {
    return capture
}

function openWebPage(){
    bShowWebUrlDlg.value = false
    ;(window as any).nw.Window.open(url.value
        , {
            position: 'center',
            inject_js_end: "document.body.style.overflow = 'hidden'" , // 去滚动条


        } ,(win)=>{
            webWin = win
            ;(window as any).web = win

            console.log(webWinSize.value)

            if(bFixWebWinSize.value) {

                let w = parseInt(webWinSize.value[0] as unknown as string)
                let h = parseInt(webWinSize.value[1] as unknown as string)

                // nwjs存在的问题：在 windows10上，设置 height 会让 width 的值
                // 可能是受边框阴影的影响
                // 连续多次调用，并且 width-1 ， 可以逼近设定值
                win.setInnerWidth(w-2)  
                win.setInnerHeight(h-1)
                
                win.setInnerWidth(w-2)
                win.setInnerHeight(h-1)
                
                win.setInnerWidth(w-2)
                win.setInnerHeight(h-1)
            }
        }
    )
}

async function onenter() {
    capture.setStageSize(stageWidth.value, stageHeight.value)
}

defineExpose({getCapture, onenter})
</script>